<%@page import="itsm.isperp.module.entity.app.AppRole"%>
<%@page import="java.util.List"%>
<%@page import="itsm.isperp.framework.core.context.ContextHolder"%>
<%@page import="itsm.isperp.module.service.app.AppRoleService"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="isperp" uri="/WEB-INF/tlds/isperp.tld"%>
<style type="text/css">
.ui-jqgrid-resize-mark {
	display: none
}

.ui-jqgrid-bdiv tr.ui-row-ltr {
	height: 30px;
}
</style>
<script type="text/javascript">
function ${ctId}Tree_onNodeClick(event, treeId, treeNode) {
	${ctId}ListSelectorGrid.resetSearchFilters();
	${ctId}ListSelectorGrid.search({
		"field" : "treenode_path",
		"op" : "bw",
		"data" : treeNode.treenodePath
	});
}
</script>

<div class="department-user-table" style="border:node;height:100%">
	<div
		style="width:159px;vertical-align: top;float:left;border-right:1px solid #eee">

		<div id="accordion">
			<h3>服务目录</h3>
			<div>
				<isperp:tree id="${ctId}Tree"
					cssStyle="height:${dheight-145}px;overflow:auto">
					<isperp:async enable="true" autoParam="'id'"
						otherParam="{asyncLoad:1}" url="serviceCatalog/category/getTree">
					</isperp:async>
					<isperp:callback onClick="${ctId}Tree_onNodeClick">
					</isperp:callback>
				</isperp:tree>
			</div>
		</div>
	</div>
	<div style="vertical-align: top;width:370px;float:left">
		<isperp:grid url="serviceCatalog/service/listDetailPub"
			autoload="false" filterToolbar="true" showSearchbar="true"
			showToolbar="false" rowNum="10" rownumbers="false"
			idFieldName="${idFieldName }" gridId="${ctId}ListSelectorGrid"
			columnFilter="false" height="${dheight-134}" pager="true"
			cusFormatterActions="false"
			onSelectRow="onSelectRowEvent(rowid,status);"
			afterGridCreate="${ctId}ListSelectorGrid.search()"
			ondbClickRowEvent="ondbClickRowEventEvent();">
			<jsp:attribute name="searchbar">
				<table class="search-table" style="display: none">
					<tbody>
						<tr>
							<td>
							    <input type="hidden" field="name" op="isnotnull" value="1">
							</td>
						</tr>
					</tbody>
				</table>
			
			</jsp:attribute>
			<jsp:body>	
			<isperp:column name="id" title="id" hidden="true" width="10"></isperp:column>
			<isperp:column name="code" title="编号" width="70">
			</isperp:column>
			<isperp:column name="name" title="名称" width="150">
			</isperp:column>
			<%-- <isperp:column name="treenode_name_path" title="目录" width="110">
			</isperp:column> --%>
			</jsp:body>
		</isperp:grid>

	</div>

	<div
		style="vertical-align:top;float:left;width:0px;overflow: hidden;display:none">
		<div style="padding:10px 0px 0px 5px" id="selectedRows"></div>
	</div>
</div>
<script type="text/javascript">

 
    $("#accordion" ).accordion({autoHeight: false,heightStyle:"content"}); 
    
	function onSelectRowEvent(rowid,status){
		if(!status){
			$("#selectedRows").find("#d_"+rowid).remove();
			return;
		}
		var rowData = ${ctId}ListSelectorGrid.getRowData(rowid);
		var value=rowData.${idFieldName};
		var find=false;
		$("#selectedRows .box").each(function(index,item){
			if (value==$(this).data("value")){
				find=true;
				return;
			}
		});
		if(find){
			return false;
		}
		var html='<div class="box" style="padding:4px;margin-top:3px" data-value="'+
			value + '" data-name="'+rowData.name+'" id="d_'+rowData.id+'">';
		html+='<a href="javascript:void(0);" onclick="deleteSelected(\''
				+rowData.id+'\')"><span class="icon icon-remove "></span>'+rowData.name+'</div>';
		if("${multiselect}"!="true"){
			$("#selectedRows").html(html);
		}else{
			$("#selectedRows").append(html);
		}
	}
	
	
	function ondbClickRowEventEvent(){
		if("${multiselect}"!="true"){
			var rowData = ${ctId}ListSelectorGrid.getRowData();
			var value=rowData.${idFieldName};
			window.parent.${ctId}SetSelected([value,rowData.name,rowData]);
		}
	}
	
	function deleteSelected(id){
		${ctId}ListSelectorGrid.jqGrid.setSelection(id, false);
		$("#selectedRows").find("#d_"+id).remove();
	}
	
	function getSelectedValue(){ 
		var values,names;
		$("#selectedRows .box").each(function(index,item){
			if(index==0){
				values=$(this).data("value");
				names=$(this).data("name");
			}else{
				values+=","+$(this).data("value");
				names+=","+$(this).data("name");
			}
		});
		return [values,names];
	}
	
	function getSelectedRowValue(){ 
		var values,names;
		$("#selectedRows .box").each(function(index,item){
			if(index==0){
				values=$(this).data("value");
				names=$(this).data("name");
			}else{
				values+=","+$(this).data("value");
				names+=","+$(this).data("name");
			}
		});
		return [values,names,${ctId}ListSelectorGrid.getRowData()];
	}
	
	</script>